// pages/tabc/tabc.js
const towxImg = require('../../../utils/towxImg');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //tab切换位置
    currentTab: 0,
    //swiper元素高度
    swiperheight: 0,
    article: ''
  },
  //计算tab切换数据容器的高度：window.h-dom.h
  setautoheight: function () {
    var that = this;
    //计算出swiper的高
    var comh1 = 0;
    var comh2 = 0;
    if (wx.createSelectorQuery) {//兼容处理 是否支持节点操作
      console.log("支持节点操作")
      wx.createSelectorQuery().select('#comh1').boundingClientRect(function (rect) {
        comh1 = rect.height  // 节点的高度
        wx.createSelectorQuery().select('#comh2').boundingClientRect(function (rect) {
          comh2 = rect.height  // 节点的高度
          //获取系统信息
          wx.getSystemInfo({
            success: function (res) {
              that.setData({ swiperheight: res.windowHeight - comh2 - comh1 });
            }
          });
        }).exec();
      }).exec();
    } else {
      console.log("不支持节点操作")
      //获取系统信息
      wx.getSystemInfo({
        success: function (res) {
          that.setData({ swiperheight: res.windowHeight });
        }
      });
    };

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options, "地址参数")
    //计算tab切换数据容器的高度：window.h-dom.h
    this.setautoheight();

    let code = '```\n<view class="container my-page">\n  <view id="comh1"> 头部信息 </view>\n  <view>\n    <view id="comh2">\n      <view class="{{currentTab==0 ? "on" : ""}}" data-current="0" bindtap="swichNav">选项卡1</view>\n      <view class="{{currentTab==1 ? "on" : ""}}" data-current="1" bindtap="swichNav">选项卡2</view>\n      <view class="{{currentTab==2 ? "on" : ""}}" data-current="2" bindtap="swichNav">选项卡3</view>\n    </view>\n    <swiper current="{{currentTab}}" duration="300" bindchange="bindChange" style="height:{{swiperheight}}px">\n      <!-- 1 -->\n      <swiper-item>\n        <scroll-view style="height:100%;" scroll-y="true">\n          内容1\n        </scroll-view>\n      </swiper-item>\n      <!-- 2 -->\n      <swiper-item>\n        <scroll-view style="height:100%;" scroll-y="true">\n          内容2\n        </scroll-view>\n      </swiper-item>\n      <!-- 3 -->\n      <swiper-item>\n        <scroll-view style="height:100%;" scroll-y="true">\n          内容3\n        </scroll-view>\n      </swiper-item>\n      <!-- eeee -->\n    </swiper>\n  </view>\n</view>\n```\n\n```\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    //tab切换位置\n    currentTab: 0,\n    //swiper元素高度\n    swiperheight: 0\n  },\n  //计算tab切换数据容器的高度：window.h-dom.h\n  setautoheight: function () {\n    var that = this;\n    //计算出swiper的高\n    var comh1 = 0;\n    var comh2 = 0;\n    if (wx.createSelectorQuery) {//兼容处理 是否支持节点操作\n      console.log("支持节点操作")\n      wx.createSelectorQuery().select("#comh1").boundingClientRect(function (rect) {\n        comh1 = rect.height  // 节点的高度\n        wx.createSelectorQuery().select("#comh2").boundingClientRect(function (rect) {\n          comh2 = rect.height  // 节点的高度\n          //获取系统信息\n          wx.getSystemInfo({\n            success: function (res) {\n              that.setData({ swiperheight: res.windowHeight - comh2 - comh1 });\n            }\n          });\n        }).exec();\n      }).exec();\n    } else {\n      console.log("不支持节点操作")\n      //获取系统信息\n      wx.getSystemInfo({\n        success: function (res) {\n          that.setData({ swiperheight: res.windowHeight });\n        }\n      });\n    };\n  },\n  /**\n   * 生命周期函数--监听页面加载\n   */\n  onLoad: function (options) {\n    console.log(options, "地址参数")\n    //计算tab切换数据容器的高度：window.h-dom.h\n    this.setautoheight();\n  },\n  /** \n   * 滑动切换tab \n   */\n  bindChange: function (e) {\n    var that = this;\n    that.setData({ currentTab: e.detail.current });\n  },\n  /** \n   * 点击tab切换 \n   */\n  swichNav: function (e) {\n    var that = this;\n    if (this.data.currentTab === e.target.dataset.current) {\n      return false;\n    } else {\n      that.setData({\n        currentTab: e.target.dataset.current\n      })\n    }\n  }\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 监听用户下拉动作
    wx.stopPullDownRefresh();//停止当前页面下拉刷新。
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /** 
   * 滑动切换tab 
   */
  bindChange: function (e) {
    var that = this;

    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }

  }
})
